<script setup>
import { ref, computed } from 'vue'
import { addDictionary, editDictionary } from '@/api/dictionary'
import { ElMessage } from 'element-plus'
const prop = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:showDialog', 'addSucess'])
const close = () => {
  emit('update:showDialog', false)
}
const formDate = ref({
  dictionary: '',
  name: '',
  status: null,
  notes: ''
})
const rules = ref({
  name: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
  dictionary: [{ required: true, message: '字典编码不能为空', trigger: 'blur' }]
})
const formRef = ref()
const getEditAPI = (row) => {
  formDate.value = row
}
const btnOK = async () => {
  await formRef.value.validate()
  if (formDate.value.id) {
    await editDictionary(formDate.value)
    ElMessage({
      showClose: true,
      message: '修改成功',
      type: 'success'
    })
  } else {
    await addDictionary(formDate.value)
    ElMessage({
      showClose: true,
      message: '添加成功',
      type: 'success'
    })
  }
  formRef.value.resetFields()
  close()
  emit('addSucess')
}
// 向外暴露方法
defineExpose({
  getEditAPI
})
const showTitle = computed(() => {
  return formDate.value.id ? '修改岗位' : '新增岗位'
})
</script>
<template>
  <el-dialog v-model="prop.showDialog" @close="close" width="35%" :title="showTitle">
    <el-form ref="formRef" :model="formDate" :rules="rules">
      <el-form-item label="字典名称" prop="name">
        <el-input v-model="formDate.name"> </el-input>
      </el-form-item>
      <el-form-item label="字典类型" prop="dictionary">
        <el-input v-model="formDate.dictionary"> </el-input>
      </el-form-item>
      <el-radio-group v-model="formDate.status">
        <el-radio :label="1">正常</el-radio>
        <el-radio :label="0">停用</el-radio>
      </el-radio-group>
      <el-form-item label="备注" prop="notes">
        <el-input type="textarea" v-model="formDate.notes"> </el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="btnOK">确定</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
